<template>
  <button :class="getAllClass" @click="handlerClick">{{ text }}</button>
</template>

<script>
export default {
  name: "MyButton",
  props: {
    type: {
      type: String,
      default: "default", // type 应该是这些值：default, warm, danger
    },
    text: {
      type: String,
      default: "按钮",
    },
    size: {
      type: String,
      default: "normal", // normal, large
    },
    className: {
      type: String,
      default: "",
    },
  },
  computed: {
    getAllClass() {
      let classList = [];

      if (this.type == "default") {
        classList.push("my-default");
      } else if (this.type == "warm") {
        classList.push("my-warm");
      } else if (this.type == "danger") {
        classList.push("my-danger");
      }

      this.className && classList.push(this.className);

      if (this.size == "large") {
        classList.push("my-large");
      }

      return classList;
    },
  },
  methods: {
    handlerClick() {
      this.$emit("click");
    },
  },
};
</script>

<style lang="scss">
button {
  padding: 5px 10px;
  background: #ddd;
  color: #333;
  border: none;
  outline: none;

  &.my-large {
    width: 100%;
  }
}
.my-default {
  color: rgb(68, 67, 67);

  &.hover {
    background: linear-gradient(#ddd, #ccc, #ddd);
  }
  &.active {
    background: linear-gradient(#ddd, #bbb, #ddd);
  }
}
.my-warm {
  background: #f89719;
  color: #fff;

  &.hover {
    background: linear-gradient(#f89719, #ca7b14, #f89719);
  }
  &.active {
    background: linear-gradient(#f89719, #aa6b18, #f89719);
  }
}
.my-danger {
  background: #f3140c;
  color: #fff;

  &.hover {
    background: linear-gradient(#f3140c, #d4120b, #f3140c);
  }
  &.active {
    background: linear-gradient(#f3140c, #970f0b, #f3140c);
  }
}
</style>